<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>玄渊的个人博客</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<link href="css/public.css" rel="stylesheet" />
		<link href="css/h2zuoye2.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/demo.css" />
		<link rel="stylesheet" type="text/css" href="css/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="css/animate.css" />

		<link id="changelink" rel="stylesheet" href="css/default.css" rel="external nofollow" />
		<style>
			#btn-red {
				--btn-red: red;
				background-color: var(--btn-red)
			}
			#btn-green {
				--btn-green: green;
				background-color: var(--btn-green)
			}
			#btn-blue {
				--btn-blue: blue;
				background-color: var(--btn-blue)
			}
			
			button {
				color: #fff;
				border: none;
				float: right;
				margin-top: 10px;
			}
		</style>
	</head>

	<body>
		<button onclick="changetheme('default')">其他</button>
		<button id="btn-blue" onclick="changetheme('blue')">蓝色</button>
		<button id="btn-green" onclick="changetheme('green')">绿色</button>
		<button id="btn-red" onclick="changetheme('red')">红色</button>
		<div class="top1">
			<header class="top-h">
				<h1>玄渊的个人博客</h1>
			</header>
			<form action="" method="post" class="basic-grey">
				<h1>站内搜索</h1>
				<label><span>博客搜索：</span>
					<input id="search" type="search" name="search" />
				</label>
			</form>
			<nav class="top-nov">
				<ul id="nav">

					<li><a href="#">首页</a></li>
					<li><a href="#">我的博客</a>
						<ul>
							<li><a href="#">个人博客1</a></li>
							<li><a href="#">个人博客2</a></li>
							<li><a href="#">个人博客3</a></li>
						</ul>

					</li>

					<li><a href="#">我的校园</a></li>
					<li><a href="#">我的摄影</a></li>
					<li><a href="#">我的音乐</a></li>
					<li><a href="#">我的书籍</a></li>
					<li><a href="#">我的相册</a>
						<ul>
							<li><a href="xiangce1.html">相册1</a></li>
							<li><a href="xiangce2.html">相册2</a></li>
							<li><a href="xiangce3.html">相册3</a></li>
						</ul>
					</li>
					<li><a href="h5zuoye1.html">胡歌专页</a></li>

				</ul>

			</nav>
			
			<aside class="l-introduce">
				<section class="news">
					<header>
						<h1>自我介绍</h1>
						<p class="jiesao">
							重庆工程学院1790005班
							张书豪179000529
						</p>
					</header>
					<aside class="int1">
						<section class="in">
							<figure>
								<img src="./images/333.jpg" alt="第一张">
								<figcaption>博主的头像</figcaption>
							</figure>

							<div class="clear"></div>
							<p>网名：玄渊</p>
						</section>
					</aside>

				</section>
				<section>
					<article>
						<header>
							<h1>书籍分享角</h1>
							<ul>
								<li><a href="https://www.bxwxorg.com/read/11/" <span>《完美世界》</span></a></li>
								<li><a href="https://www.bxwxorg.com/read/12897/" <span>《恰似寒光遇骄阳》</span></a></li>
								<li><a href=https://www.bxwxorg.com/read/111003/" <span>《刑凶集录》</span></a></li>
								<li><a href="https://www.bxwxorg.com/read/31/" <span>《唐砖》</span></a></li>
								<li><a href="https://www.bxwxorg.com/read/7656/" <span>《汉乡》</span></a></li>
							</ul>
							<ul class="score">
								<li>点击率:<meter min="0" low="30" high="80" max="100" value="75"></li>
								<li>观看率:<meter min="0" low="30" high="80" max="100" value="90"></li>
								<li>评论率:<meter min="0" low="30" high="80" max="100" value="100"></li>
							</ul>
						</header>

					</article>
				</section>
			</aside>
			<main>
				<article>
					<details open="open">
						<summary>显示|隐藏 胡歌专栏</summary>

						<header>
							<h2>正能量古月哥欠</h2>
						</header>

						<ul>
							<li><a href="https://www.baidu.com/sf/vsearch?pd=video&tn=vsearch&lid=d441cf820001495a&ie=utf-8&wd=%E8%83%A1%E6%AD%8C&rsv_spt=7&rsv_bp=1&f=8&oq=%E8%83%A1%E6%AD%8C&rsv_pq=d441cf820001495a&rsv_t=533aooaLWCBslF2U66sTSS5HwQcAVvsoTT7kg3VzLuE38vVIK5z8M7ptd7co8TFba2VmfEIAQ24">"点击可跳转一览"胡歌出演的影视</a><span>《琅琊榜》《伪装者》《仙剑奇侠传》等</span></li>
							<li><a href="http://music.taihe.com/search?key=%E8%83%A1%E6%AD%8C">"点击可跳转一览"胡歌演唱的音乐</a><span>《蓝光》《忘记时间》《月光》等</span></li>
							<li><a href="https://www.weibo.com/hu_ge">"点击可跳转一览"胡歌的新浪微博</a><span>了解爱豆最新资讯，发布的微博</span></li>
							<li><a href="https://baike.baidu.com/item/%E8%83%A1%E6%AD%8C/312718?fr=aladdin">"点击可跳转一览"胡歌的百度资料</a><span>胡歌（1982年9月20日-），出生于上海徐汇区，毕业于上海戏剧学院，中国男演员、歌手、制片人。2005年其因主演仙侠剧《仙剑奇侠传》而出道走红，10年后因相继主演电视剧《伪装者》《琅琊榜》而声名大噪，其演技纯熟，能准确的把握节奏，曾获上海电视节白玉兰奖“最佳男主角奖”、中国电视金鹰奖“观众喜爱的男演员奖”和北京丹尼国际舞台表演艺术奖“最佳男演员奖”等奖项
									，并且2次登上央视春晚。2020年2月，参演电视剧《繁花》。</span></li>
						</ul>


				</article>
				</details>
				<div>
					<h1 class="sj">阅览书籍请到左下角书籍分享区,分享区点击可跳转</h1>
				</div>
				<figure>
					<figcaption>
						<h2>重庆工程学院校园风光</h2>
					</figcaption>
					<img src="images/cg1.jpg" width="120" />
					<img src="images/cg2.jpg" width="200" />
					<img src="images/cg3.jpg" width="200" />
					<img src="images/cg4.jpg" width="200" />

					<p>尽责-守信-求精-创新</p>
				</figure>

				<div class="tupian1"></div>
				<div class="tupian2"></div>
			</main>

			<footer class="yejiao">
				著作权归正大软件公司所有
				<br />地址:
				<address>重庆市巴南区南泉街道白鹤村182号</address>
			</footer>
		</div>
		<script>
			let hnav = document.querySelector(".hnav");
			let tt = document.querySelector(".top-nov");
			let flag = 1;
			hnav.addEventListener("click", function() {
				if (flag) {
					tt.style.display = "block";
					tt.className = "animated bounceInDown"
					flag = 0;
				} else {
					tt.style.display = "none";
					flag = 1;
				}
			})

			var csslink = document.getElementById("changelink");

			//初始化主题
			loadtheme();

			function changetheme(color) {
				csslink.href = "css/" + color + ".css";
				//保存主题到cookies
				document.cookie = "theme=" + color;
			}

			function loadtheme() {
				//从cookies读取主题
				var themevalue = document.cookie.split(";")[0].split("=")[1];
				if (themevalue == null) {
					csslink.href = "css/default.css";
				} else {
					csslink.href = "css/" + themevalue + ".css";
				}
			}
		</script>

	</body>

</html>
